<template>
	<rui-pages>
		<view class="header">
			<view class="avatar">
				<image :src="user?.info?.avatar || '/static/images/avatar.jpg'" class="avatar_image" mode=""></image>
			</view>
			<rui-info :user="user.info" ref="refInfo" @change="logout"></rui-info>
			<view class="user" v-if="user.isLogin" @click="onUser">
				<view class="user_info">
					<view class="user_info_nickname">
						{{user?.info?.nickname}}
					</view>
					<view class="user_info_tips">
						管理账号，会员权益等
					</view>
					<view class="user_info_device">
						{{user?.getNumber}}个智能设备
					</view>
				</view>
				<view class="user_icon">
					<rui-icons icon="right"></rui-icons>
				</view>
			</view>

			<view class="login" v-else
				@click="$rui.route('/pages/user/login/login', {back: '/pages/tabbar/user/user', type: 'switchTab'})">
				<view class="login_avatar">
					<image src="/static/images/avatar.jpg" class="login_avatar_image" mode=""></image>
				</view>
				<view class="login_box">
					<view class="login_box_name">
						点击登录
					</view>
					<view class="login_box_tips">
						开启智能生活
					</view>
				</view>
			</view>
		</view>
		
		<view class="title">
			<image src="/static/images/logo.png" class="title_logo" mode=""></image>
			<rui-title title="Hey,SMIHE"></rui-title>
		</view>

		<rui-menu :data="menu"></rui-menu>
		<view class="menu">
			<view class="menu_item" v-for="(item, index) in protocol" :key="index" @click="onMenu(item)">
				<view class="menu_item_name">
					{{item.name}}
				</view>
				<rui-icons icon="right" color="#aaa"></rui-icons>
			</view>
		</view>
	</rui-pages>

</template>

<script setup>
	import {
		ref
	} from "vue"

	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import cache from "@/util/cache.js"

	import {
		getArticle,
		getUserInfo
	} from "@/common/api.js"

	import tools from "@/util/tools.js"
	
	import { userStore } from "@/store/index.js"

	let user = userStore()
	let info = ref({})
	let protocol = ref([])
	let menu = ref([])
	let refInfo = ref(null)

	onShow(() => {
		if(user.isLogin) {
			getUserInfo().then(res => {
				info.value = res.data;
			})
		}else{
			info.value = {}
		}
	})

	onLoad(() => {
		getArticle().then(res => {
			protocol.value = res.data.protocol;
			menu.value = res.data.menu;
		})
	})
	
	const onUser = ()=> {
		refInfo.value.open(user.info, user.getNumber)
	} 

	const onMenu = (e) => {
		if (e.category == 'path') {
			uni.$rui.route(e.path)
		}

		if (e.category == 'protocol') {
			uni.$rui.route('/pages/user/protocol/protocol', {
				id: e.id
			})
		}

		if (e.category == 'miniapp') {
			wx.navigateToMiniProgram({
				appId: e.content,
				path: e.path,
			})
		}
	}

	const logout = () => {
		uni.showModal({
			title: '退出提示',
			content: '您确定要退出吗？',
			success: function(res) {
				if (res.confirm) {
					cache.remove("UserInfo");
					user.logout()
					user.value = {}
					refInfo.value.close()
				}
			}
		});
	}
</script>

<style lang="scss" scoped>
	.header {
		overflow: hidden;
		width: 100%;

		.login {
			display: flex;
			align-items: center;
			margin: 100rpx 20rpx 20rpx;

			&_box {
				&_name {
					font-size: 38rpx;
				}

				&_tips {
					font-size: 24rpx;
					color: rgba(0, 0, 0, .5);
				}
			}

			&_avatar {
				margin-right: 20rpx;

				&_image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}
			}
		}

		.user {
			margin: 100rpx 20rpx 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: end;
			overflow: hidden;
			position: relative;
			
			&_icon{
				position: absolute;
				bottom: 50rpx;
				right: 30rpx;
			}

			&_info {
				&_nickname {
					font-size: 50rpx;
				}

				&_tips {
					color: rgba(0, 0, 0, .5);
					font-size: 28rpx;
				}

				&_device {
					border: 1rpx solid #eee;
					border-radius: 30rpx;
					color: rgba(0, 0, 0, .5);
					background: rgba(255, 255, 255, .5);
					padding: 2rpx 20rpx;
					font-size: 28rpx;
					width: fit-content;
					margin-top: 10rpx;
				}
			}


		}

		.avatar {

			&::after {
				content: "";
				display: block;
				height: 100rpx;
				width: 200rpx;
				background: var(--color);
				border-radius: 50%;
				filter: blur(80rpx);
				position: absolute;
				top: 150rpx;
				right: 0;
			}


			&_image {
				position: absolute;
				top: 100rpx;
				left: 0;
				z-index: -1;
				width: 250rpx;
				height: 300rpx;
				filter: blur(100rpx);
			}
		}

	}

	.title {
		position: relative;
		margin-top: 50rpx;

		&_logo {
			position: absolute;
			top: -50rpx;
			right: 40rpx;
			width: 220rpx;
			height: 140rpx;
			z-index: 1;
		}
	}

	.menu {
		margin: 20rpx;
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;

		&_item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 35rpx 40rpx;
			border-bottom: 1rpx dashed #f6f7f8;

			&:active {
				background: #eee;
			}

			&:last-child {
				border-bottom: none;
			}

			// &:first-child {
			// 	padding-top: 10rpx;
			// }
		}
	}

	.header {
		&_info {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0;

			&_item {
				width: 33%;
				display: flex;
				align-items: center;

				&_number {
					font-size: 48rpx;
					font-weight: bold;
					margin-left: 15rpx;
				}

				&_name {
					font-size: 28rpx;
					color: rgba(0, 0, 0, .5);
				}
			}
		}

	}
</style>